import React, {PureComponent} from "react";
import {notification, Table} from "antd";
import {tableProps} from "../../lib/ui";
import {showCreateOrderFee, showUpdateOrderOutFee, updateOrderOutFee} from "./actions";
import {connect} from "react-redux";
import UpdateOrderOutFeeModal from "./UpdateOrderOutFeeModal";

class OrderOutFeeModal extends PureComponent {

    handleShowCreate = () => {
        const {dispatch} = this.props;
        dispatch(showCreateOrderFee());
    };
    handleUpdate = record => {
        const {dispatch} = this.props;
        dispatch(showUpdateOrderOutFee(record));
    };
    handleDelete = id => {
        const {dispatch, fees} = this.props;
        let deleteIndex = fees.findIndex(item => item.id === id);
        fees.splice(deleteIndex, 1);
        dispatch(updateOrderOutFee(fees));
        notification.success({
            message: '移除成功'
        });
    };

    render() {
        const {fees, loading, feeList} = this.props;
        let dataSource = [];
        feeList.forEach(fee => {
            const found = fees.find(f => f.feeName === fee.name);
            if (found) {
                fee.feeName = fee.name;
                fee.feeCount = found.feeCount;
                fee.currency = found.currency;
            } else {
                fee.feeName = fee.name;
                fee.feeCount = 0;
                fee.currency = "";
            }
            dataSource.push({...fee});
        });
        const columns = [
            {
                title: "费用科目",
                dataIndex: "feeName",
                width: "150px",
            }, {
                title: "金额",
                dataIndex: "feeCount",
                width: "150px",
                render: text => <span>{text && Number(text).toFixed(2)}</span>
            }, {
                title: "币种",
                dataIndex: "currency"
            }
        ];

        return (

            <div>
                <Table
                    {...tableProps}
                    columns={columns}
                    dataSource={dataSource}
                    loading={loading}
                />
                <UpdateOrderOutFeeModal/>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.zadOrderReceivable.orderOutFee,
        order: state.zadOrderReceivable.modify.model,
        feeList: state.zadOrderReceivable.list.feeList
    };
};

export default connect(mapStateToProps)(OrderOutFeeModal);
